import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { DisabledComponent } from './disabled/disabled.component';
import { ToggleComponent } from './toggle/toggle.component';

export const InputIPConfig = {
  location: 'InputIP',
  description: '用于输入 IP 地址。',
  description_en: 'InputIP is used to input IP address.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/input-ip/demo1/demo1.component',
      demoTitle: 'IPv4',
      demoTitle_en: 'IPv4',
      demoDescription: '用于 IPv4 的输入和展示。',
      demoDescription_en: 'Input and presentation for IPv4.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/input-ip/demo2/demo2.component',
      demoTitle: 'IPv6',
      demoTitle_en: 'IPv6',
      demoDescription: '用于 IPv6 的输入和展示。',
      demoDescription_en: 'Input and presentation for IPv6.',
    },
    {
      demo: ToggleComponent,
      codePath: 'showcase/input-ip/toggle/toggle.component',
      demoTitle: 'IPv4与IPv6切换',
      demoTitle_en: 'Switchover Between IPv4 and IPv6',
      demoDescription: 'IPv4与IPv6切换的场景,暂不支持带端口号',
      demoDescription_en: 'Port numbers are not supported in IPv4 and IPv6 switchover scenarios.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/input-ip/demo3/demo3.component',
      demoTitle: '事件',
      demoTitle_en: 'event',
      demoDescription: '用于事件调用展示。',
      demoDescription_en: 'Event Invoking Demonstration.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/input-ip/demo4/demo4.component',
      demoTitle: '带端口的IPv4',
      demoTitle_en: 'IPv4 with the port',
      demoDescription: '用于带端口的 IPv4 的展示。暂不支持IPv6带端口',
      demoDescription_en: 'IPv4 with the port Demonstration.IPv6 with the port is not supported currently.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/input-ip/demo5/demo5.component',
      demoTitle: '尺寸',
      demoTitle_en: 'size',
      demoDescription: '大尺寸的IP输入框。',
      demoDescription_en: 'Large size InputIP.',
    },
    {
      demo: DisabledComponent,
      codePath: 'showcase/input-ip/disabled/disabled.component',
      demoTitle: '禁用',
      demoTitle_en: 'Disabled',
      demoDescription: '可用 lvDisabled 禁止组件，支持禁止部分内容',
      demoDescription_en: 'Components can be disabled by lvDisabled, support for disabling some content.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-input-ip',
  snippet: '<lv-input-ip [(ngModel)]="${1:ip}"> </lv-input-ip>',
  mApi: [
    {
      name: 'InputIP 属性',
      name_en: 'InputIP Options',
      api: [
        {
          attribute: 'lvType',
          type: 'string',
          default: 'v4',
          description: "IP 地址的类型 ('v4' | 'v6')，默认为 IPv4。",
          description_en: "The type of IP address ('v4' | 'V6'), which is IPv4 by default.",
        },
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: 'InputIP大小。',
          description_en: 'size of InputIP.',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean | number[]',
          default: 'false',
          description: '是否禁用 IP 输入框；传入数组（起始值为0）时, 固定ip段不可编辑。',
          description_en:
            'Whether to disable InputIP,when the input array (start value: 0) is used, the fixed IP address segment cannot be edited.',
        },
        {
          attribute: 'ngModel',
          type: 'string',
          default: 'null',
          description: '设置 IP 输入框的值，可双向绑定。',
          description_en: 'Set the value of InputIP.',
        },
        {
          attribute: 'lvIsShorthand',
          type: 'booean',
          default: 'false',
          description: 'IP值是否简写。',
          description_en: 'Whether the IP value is abbreviated.',
          global: true,
        },
        {
          attribute: 'lvShowPort',
          type: 'boolean',
          default: 'false',
          description: 'IPv4 是否带端口，默认为 false,暂不支持IPv6带端口。',
          description_en:
            'Whether the IPv4 display with the port, The default value is false. IPv6 with the port is not supported currently.',
          global: true,
        },
        {
          attribute: 'lvBlock',
          type: 'boolean',
          default: 'false',
          description: '将整体宽度调整为其父宽度，`false` 时，整体宽度为规范定义宽度。',
          description_en:
            'Adjusts the overall width to its parent width. When `false`, the overall width is the specification-defined width.',
          global: true,
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: 'value: string',
          description: '当 IP 输入框的值变化时的回调函数。参数为输入的 IP 地址。',
          description_en:
            'Callback function when the value of InputIP changes, which parameter is the IP address input.',
        },
        {
          event: 'lvFocus',
          parameter: 'value: string',
          description: '当 IP 输入框聚焦时触发。',
          description_en: 'Callback function when focus on the InputIP.',
        },
        {
          event: 'lvBlur',
          parameter: 'value: string',
          description: '当 IP 输入框失焦时触发。',
          description_en: 'Callback function when blur from the InputIP.',
        },
      ],
    },
  ],
};
